//文档加载事件
window.addEventListener('load', function () {
    //banner轮播图
    new Swiper('.swiper', {
        //direction: 'vertical', // 垂直切换选项 水平方向切换(horizontal)或垂直方向切换(vertical)
        loop: true, // 循环模式选项
        autoplay: true,

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }


    })

    /* 
      页面数据的动态渲染 --把后端提供的数据渲染到网页中

        步骤:
            1.获取数据源---后期使用ajax获取---目前只做数据模拟操作
            2.定义变量保存循环出来的html结构
            3.遍历数据源,拼接html结构
            4.把指定拼接好的结构放到指定位置  serviceList
    */

    //1.数据模拟--数据源
    // let arr=['API私有化服务','源码云监测','源码有赢','YuanMa API'];

    // let arr=[
    //     {
    //         imgUrl:'./imgs/service01.svg',
    //         title:'API私有化服务',
    //         desc:'可部署本地&专有云的Web API'
    //     },
    //     {
    //         imgUrl:'./imgs/service02.svg',
    //         title:'源码云监测',
    //         desc:'可部署本地&专有云的Web API'
    //     },
    //     {
    //         imgUrl:'./imgs/service03.svg',
    //         title:'源码有赢',
    //         desc:'可部署本地&专有云的Web API'
    //     },
    //     {
    //         imgUrl:'./imgs/service04.svg',
    //         title:'YuanMa API',
    //         desc:'可部署本地&专有云的Web API'
    //     }


    // ]

    //2.定义变量保存拼接结构
    /* 
    
      格式:

        <li>
                <img src="./imgs/service01.svg" alt="">
                <div class="plr20 font12">
                    <h4 class="font20 fwnormal">API私有化服务</h4>
                    <p class="font10 mt5b25 c6">
                        可部署本地&专有云的Web API
                    </p>
                    <a href="#">去搜索</a>
                </div>
            </li>
    */

    // let sHtml='';

    // //3.遍历数据源,拼接html结构
    // arr.forEach(function(v){
    //     // console.log(v); //获取到数据源中的每一条数据

    //     sHtml+=`
    //     <li>
    //             <img src="${v.imgUrl}" alt="">
    //             <div class="plr20 font12">
    //                 <h4 class="font20 fwnormal">${v.title}</h4>
    //                 <p class="font10 mt5b25 c6">
    //                 ${v.desc}
    //                 </p>
    //                 <a href="#">去搜索</a>
    //             </div>
    //         </li>
    //     `
    // })

    // //查看拼接后的数据
    // // console.log(sHtml);

    // serviceList.innerHTML=sHtml;


    //海量api渲染数据
    //1.定义数据
    let apiData = [
        {
            imgUrl: './imgs/api01.svg',
            title: '生活服务'
        },
        {
            imgUrl: './imgs/api02.svg',
            title: '金融科技'
        },
        {
            imgUrl: './imgs/api03.svg',
            title: '交通地理'
        },
        {
            imgUrl: './imgs/api04.svg',
            title: '充值缴费'
        },
        {
            imgUrl: './imgs/api05.svg',
            title: '数据智能'
        },
        {
            imgUrl: './imgs/api06.svg',
            title: '企业工商'
        },
        {
            imgUrl: './imgs/api07.svg',
            title: '应用开发'
        },
        {
            imgUrl: './imgs/api08.svg',
            title: '电子商务'
        },
        {
            imgUrl: './imgs/api09.svg',
            title: '吃喝玩乐'
        },
        {
            imgUrl: './imgs/api10.svg',
            title: '文娱视频'
        }
    ];

    //2.定义变量保存数据结构
    let apiHtml = '';

    //3.遍历拼接结构
    /* 
        格式:
             <li>
                    <a href="#">
                        <img src="./imgs/api02.svg" alt="">
                        <h4>生活服务</h4>
                    </a>
                </li>
    */

    apiData.forEach(function (v) {
        // console.log(v);

        apiHtml += `
            <li>
                <a href="#">
                    <img src="${v.imgUrl}" alt="">
                    <h4>${v.title}</h4>
                </a>
            </li> 
        `
    })

    //4.添加到指定位置
    apiList.innerHTML = apiHtml;
    // console.log(apiData);


    //海量api hover效果
    /* 
        移入:  给当前a标签添加一个背景色,把img图换成api0x-c.svg , h4文本白色

        移出: 把所有相关js操作过的都还原回去

        分析:
            事件源
            事件类型:
            事件处理

    */

    //1.获取所有元素对象
    let aDom = getEleAll('#apiList li a');

    console.log(aDom);

    //定义全局变量
    let oldSrc = '';

    //2.遍历注册事件
    aDom.forEach(function (v) {
        // console.log(v);
        // 3.注册事件

        //移入事件
        v.addEventListener('mouseover', function () {
            // console.log(222);

            //给当前a标签添加背景色
            this.style.backgroundColor = '#2f7ee9';
            //给当前a标签中的h4标签添加白色
            this.lastElementChild.style.color = '#fff';
            // console.log(this);

            /* 
                处理img标签的src地址 
                    0.把当前地址使用全局变量保存出来 
                    1.获取当前img标签src地址
                    2.对地址进行截取操作  如:  api01.svg  ==> api01-c.svg 
                    3.把改变后的地址放回去
            */
            //1.获取当前img的地址
            let imgUrl = this.firstElementChild.src;
            /* 
                http://127.0.0.1:5500/2022-01-14-%E6%BA%90%E7%A0%81%E5%A4%A7%E6%95%B0%E6%8D%AE%E9%A1%B9%E7%9B%AE-day01/code/ymBigData/imgs/api06.svg
            
            */

            //保存一份
            oldSrc = imgUrl;

            //2.处理地址---从地址中获取 图像文件名 如: api06.svg
            //方式一:
            /* //获取从后往前数的 / 的索引值
            let index=imgUrl.lastIndexOf('/');
            //从指定索引截取后面所有字符串
            let newUrl=imgUrl.substring(index+1);

            this.firstElementChild.src=`./imgs/${newUrl.split('.')[0]}-c.svg` */

            //方式二:  从0开始截取到 倒数第一个点的位置  +拼接结构
            let cutUrl = imgUrl.substring(0, imgUrl.lastIndexOf('.'));

            this.firstElementChild.src = `${cutUrl}-c.svg`;

            // console.log(imgUrl.substring(0,imgUrl.lastIndexOf('.')));

        })

        //移出事件

        v.addEventListener('mouseout', function () {
            // console.log(333);

            this.style.backgroundColor = '';
            this.lastElementChild.style.color = '';
            this.firstElementChild.src = oldSrc;
        })
    })

    
    //独角兽企业效果

    //方式一:使用原生js来实现
    //1.获取所有相关的元素对象
    let itmesDom=getEleAll('#unicorn .items');
    //2.定义全局索引值
    let index=0;

    //3.动态设置默认选中第一个items  --显示出来
    itmesDom[index].style.display='block';

    //动态切换效果  2s换一次

    window.setInterval(function(){
        //把前一个隐藏起来
        itmesDom[index].style.display='none';
        
        index++;

        //判定
        if(index==itmesDom.length){
            index=0;
        }

        itmesDom[index].style.display='block';
    },2000)

    // 10.返回顶部
    
})